<template>
  <div class="indexSettingPage">
    <!-- <div>
      <el-steps :active="active" finish-status="success">
        <el-step title="监管项目类型选择" icon="el-icon-edit" />
        <el-step title="节点选择" icon="el-icon-edit" />
      </el-steps>
    </div> -->
    <div class="sign">
      正在为:<span v-if="activeName!==&quot;&quot;"><span style="color:red">项目类型为:</span>{{ activeName }},</span>
      <span v-if="activeName1!==&quot;&quot;"><span style="color:red">节点为:</span>{{ activeName1 }}设置规则</span>
    </div>
    <div class="indexSettingPage_container">
      <div class="indexSettingPage_container_content">
        <div style="display:flex" class="indexSettingPage_container_content_second animated bounceInRight">
          <div style="flex:1;border-right:1px solid #dcdfe6;padding:10px;height: calc(84vh);">
            <div class="title">项目类型选择</div>
            <el-input
              v-model="filterText"
              placeholder="输入关键字进行过滤"
            />
            <el-tree
              ref="tree"
              style="margin-top:10px"
              class="filter-tree"
              :data="data"
              node-key="id"
              :props="defaultProps"
              default-expand-all
              show-checkbox
              :filter-node-method="filterNode"
              @check-change="handleCheckChange"
            />
          </div>
          <div style="flex:2;border-right:1px solid #dcdfe6;padding:10px;height: calc(84vh);">
            <div class="title">节点选择</div>
            <el-input
              v-model="filterText1"
              placeholder="输入关键字进行过滤"
            />
            <el-tree
              ref="tree1"
              style="margin-top:10px"
              class="filter-tree"
              :data="data1"
              node-key="id"
              :props="defaultProps1"
              default-expand-all
              show-checkbox
              :filter-node-method="filterNode"
              @check-change="handleCheckChange1"
            />
          </div>
          <div style="flex:4;padding:10px">
            <!-- style="height:calc(25vh);overflow-y:auto" -->
            <div>
              <div class="third_title">
                <div style="flex:1;color:black;font-weight:bolder">规则选择：</div>
                <div class="addRule" style="flex:1;text-align:right;color:blue;cursor:pointer" @click="addRule">添加规则</div>
              </div>
              <div v-if="checkOption.length!==0" class="writeRule">
                <div style="height:calc(70vh);overflow-y:auto">
                  <el-checkbox-group v-model="checkList">
                    <el-checkbox v-for="(item,index) in checkOption " :key="index" :label="item.target">
                      <span style="display: inline-block;width: 80px;"> {{ item.target }}:</span>
                      <el-input v-model="item.memo" placeholder="请输入规则" style="width:78%;margin-left:10px" />
                      <span style="margin-left:5px"><i class="el-icon-delete" @click.prevent="deletRule(item)" /> </span>
                    </el-checkbox>
                  </el-checkbox-group>
                </div>
                <div class="saveClass" @click="saveConfig">保存</div>
              </div>
              <div v-else style="text-align:center;font-size:18px">
                暂无规则
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <el-dialog
      title="添加规则"
      :visible.sync="dialogVisible"
      append-to-body
      :before-close="handleClose"
    >
      <div>
        <div style="margin-bottom:10px">
          <span class="ruleClass">规则名称:</span>
          <el-input v-model="form.ruleName" style="width:80%" placeholder="请输入规则名称" />
        </div>
        <div>
          <span class="ruleClass">规则:</span>
          <el-input v-model="form.rule" style="width:80%" placeholder="请输入规则" />
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="makeSure">添加</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// addRules,addConfig
import { getRules, removeRules, addRules, addConfig } from '@/api/indexSettingPage/index.js';
export default {

  data() {
    return {
      writeList: [],
      form: {
        rule: '',
        ruleName: ''
      },
      dialogVisible: false,
      value: '',
      activeName: '',
      activeName1: '',
      checkOption: [],
      checkList: [],
      active: 0,
      filterText: '',
      filterText1: '',
      data1: [
        {
          id: 1,
          label: '预算'
        }, {
          id: 2,
          label: '指标'
        },
        {
          id: 3,
          label: '计划'
        },
        {
          id: 4,
          label: '采购'
        },
        {
          id: 5,
          label: '公示'
        },
        {
          id: 6,
          label: '合同'
        },
        {
          id: 7,
          label: '发票'
        },
        {
          id: 8,
          label: '支付'
        },
        {
          id: 9,
          label: '资产'
        },
        {
          id: 10,
          label: '巡查'
        }
      ],
      data: [
        {
          id: 1,
          label: '一般预算监管'
        },
        {
          id: 2,
          label: '补助类监管'
        },
        {
          id: 3,
          label: '项目类监管'
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      defaultProps1: {
        children: 'children',
        label: 'label',
        disabled: this.disabledFn
      }

    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
    filterText1(val) {
      this.$refs.tree1.filter(val);
    }

  },
  methods: {
    handleClose() {
      this.form.ruleName = '';
      this.form.rule = '';
      this.dialogVisible = false;
    },
    saveConfig() {
      if (this.checkList.length === 0) {
        this.$message.warning('规则选择不能为空');
      } else {
        this.$confirm('此操作将保存规则, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.writeList = [];
          this.checkList.map(a => {
            this.checkOption.map(b => {
              if (a === b.target) {
                this.writeList.push({
                  targetId: b.targetId,
                  memo: b.memo
                });
              }
            });
          });
          addConfig({
            programType: this.$refs.tree.getCheckedNodes()[0].label,
            node: this.$refs.tree1.getCheckedNodes()[0].label,
            list: this.writeList
          }).then(res => {
            if (res.success) {
              this.$message.success('保存成功');
            } else {
              this.$message.warning('保存失败');
            }
          });
        });
      }
    },
    makeSure() {
      if (this.form.rule === '') {
        this.$message.warning('规则不能为空');
      } else if (this.form.ruleName === '') {
        this.$message.warning('规则名称不能为空');
      } else {
        addRules({
          target: this.form.ruleName,
          memo: this.form.rule
        }).then(res => {
          if (res.success) {
            this.$message.success('添加成功');
            this.handleClose();
            this.getRules();
          } else {
            this.$message.warning('添加失败');
          }
        });
      }
    },
    disabledFn() {
      if (this.$refs.tree.getCheckedNodes().length === 0) {
        return true;
      }
    },
    deletRule(item) {
      this.$confirm('此操作将永久删除该规则, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        removeRules({
          id: [item.targetId]
        }).then(res => {
          if (res.success) {
            this.$message.success('删除成功');
            this.getRules();
          } else {
            this.$message.warning('删除失败');
          }
        });
      });
    },
    addRule() {
      if (this.$refs.tree1.getCheckedNodes().length === 0) {
        this.$message.warning('节点选择不能为空');
      } else {
        this.dialogVisible = true;
      }
    },

    handleCheckChange(data, checked, indeterminate) {
      this.$refs.tree1.setCheckedKeys([]);
      this.checkOption = [];
      if (checked) {
        this.activeName = data.label;
        this.$refs.tree.setCheckedKeys([data.id]);
      }
    },
    getRules() {
      getRules({
        programType: this.$refs.tree.getCheckedNodes()[0].label,
        node: this.$refs.tree1.getCheckedNodes()[0].label
      }).then(res => {
        if (res.success) {
          this.checkList = [];
          res.data.map(o => {
            if (o.isBind === 1) {
              this.checkList.push(o.target);
            }
          });
          this.checkOption = res.data;
        }
      });
    },
    handleCheckChange1(data, checked, indeterminate) {
      if (checked) {
        this.$refs.tree1.setCheckedKeys([data.id]);
        this.activeName1 = data.label;
        this.getRules();
      } else {
        this.checkOption = [];
      }
    },

    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    }
  }
};
</script>

<style lang='scss' scoped >
  .indexSettingPage{
    padding:30px 60px
  }
  .sign{
    margin-top: 10px
  }
  .indexSettingPage_container{
    margin-top: 10px;
    height: calc(85vh);
    border: 1px solid #dcdfe6;
    border-radius: 10px;
    box-shadow: 10px 10px 5px #c3c3c3;

    .indexSettingPage_container_footer{
        margin-top: 10px;
        display: flex;
        .indexSettingPage_container_footer_left,.indexSettingPage_container_footer_right{
          flex:1;
          cursor: pointer;
          color:#1890ff;
          font-size: 15px
        }
        .indexSettingPage_container_footer_left:hover,.indexSettingPage_container_footer_right:hover{
          text-decoration: underline
        }
    }

}
.third_title{
  display: flex;
  margin-bottom: 10px;
  margin-top: 10px;
  font-size: 16px;
}
.addRule:hover{
  text-decoration: underline
}
.writeRule /deep/.el-checkbox {
    color: #606266;
    font-weight: 500;
    font-size: 14px;
    position: relative;
    cursor: pointer;
    display: inline-block;
    white-space: nowrap;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin-right: 30px;
    margin-bottom: 14px;
    width: 93%;
}
.writeRule /deep/ .el-checkbox__label {
    display: inline-block;
    padding-left: 10px;
    line-height: 19px;
    font-size: 14px;
    width: 100%;
}
.title{
  text-align: center;
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  font-weight: bolder;
}
.saveClass{
  text-align:right;
  color:blue;
  font-weight:bolder;
  padding-right:10px;
  font-size:15px
}
.saveClass:hover{
  cursor: pointer;
  text-decoration: underline
}
.ruleClass{
    display: inline-block;
    width: 80px;
}

</style>
